<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-title">
        <text class="title-icon">🍽️</text>
        <text class="title-text">添加美味菜品</text>
      </view>
      <text class="subtitle">让美食与顾客相遇</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 菜品名称输入 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">📝</text>
          <text>菜品名称</text>
        </view>
        <input
            class="form-input"
            v-model="dishForm.name"
            placeholder="请输入菜品名称"
            placeholder-class="input-placeholder"
        />
      </view>

      <!-- 菜品图片上传 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">📷</text>
          <text>菜品图片</text>
        </view>
        <view class="image-upload" @click="chooseImage">
          <image
              v-if="dishForm.image"
              :src="dishForm.image"
              class="preview-image"
              mode="aspectFill"
          />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">📸</text>
            <text class="upload-text">点击上传图片</text>
          </view>
        </view>
      </view>

      <!-- 菜品价格输入 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">💰</text>
          <text>菜品价格</text>
        </view>
        <view class="price-input-container">
          <text class="price-symbol">¥</text>
          <input
              class="price-input"
              v-model="dishForm.price"
              type="digit"
              placeholder="0.00"
              placeholder-class="input-placeholder"
          />
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @click="submitDish" :disabled="!isFormValid">
        <text class="btn-text">🎉 添加菜品</text>
      </button>
    </view>

    <!-- 已添加菜品列表 -->
    <view class="dish-list" v-if="dishList.length > 0">
      <view class="list-header">
        <text class="list-title">已添加菜品 ({{dishList.length}})</text>
      </view>
      <view class="dish-item" v-for="(dish, index) in dishList" :key="index">
        <image :src="dish.image" class="dish-image" mode="aspectFill" />
        <view class="dish-info">
          <text class="dish-name">{{dish.name}}</text>
          <text class="dish-price">¥{{dish.price}}</text>
        </view>
        <view class="dish-actions" @click="deleteDish(index)">
          <text class="delete-btn">🗑️</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dishForm: {
        name: '',
        image: '',
        price: ''
      },
      dishList: []
    }
  },

  computed: {
    isFormValid() {
      return this.dishForm.name && this.dishForm.image && this.dishForm.price;
    }
  },

  onLoad() {
    this.loadDishList();
  },

  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.dishForm.image = res.tempFilePaths[0];
        },
        fail: () => {
          uni.showToast({
            title: '图片选择失败',
            icon: 'error'
          });
        }
      });
    },

    // 提交菜品
    submitDish() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请完善菜品信息',
          icon: 'error'
        });
        return;
      }

      const newDish = {
        id: Date.now(),
        name: this.dishForm.name,
        image: this.dishForm.image,
        price: parseFloat(this.dishForm.price).toFixed(2)
      };

      this.dishList.push(newDish);
      this.saveDishList();

      // 重置表单
      this.dishForm = {
        name: '',
        image: '',
        price: ''
      };

      uni.showToast({
        title: '添加成功！',
        icon: 'success'
      });
    },

    // 删除菜品
    deleteDish(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个菜品吗？',
        confirmText: '删除',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.dishList.splice(index, 1);
            this.saveDishList();
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    },

    // 保存菜品列表到本地存储
    saveDishList() {
      try {
        uni.setStorageSync('dishList', JSON.stringify(this.dishList));
      } catch (e) {
        console.error('保存失败', e);
      }
    },

    // 从本地存储加载菜品列表
    loadDishList() {
      try {
        const storedList = uni.getStorageSync('dishList');
        if (storedList) {
          this.dishList = JSON.parse(storedList);
        }
      } catch (e) {
        console.error('加载失败', e);
        this.dishList = [];
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
  padding-bottom: 100rpx;
}

.header {
  text-align: center;
  padding: 60rpx 40rpx 40rpx;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20rpx);

  .header-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;

    .title-icon {
      font-size: 60rpx;
      margin-right: 20rpx;
    }

    .title-text {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .subtitle {
    font-size: 28rpx;
    color: #666;
    opacity: 0.8;
  }
}

.form-container {
  margin: 40rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 30rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 50rpx;

  .form-label {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;

    .label-icon {
      margin-right: 15rpx;
      font-size: 36rpx;
    }
  }

  .form-input {
    width: 100%;
    height: 80rpx;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 15rpx;
    padding: 0 25rpx;
    font-size: 30rpx;
    transition: all 0.3s ease;

    &:focus {
      border-color: #FF6B35;
      background: #fff;
    }
  }

  .input-placeholder {
    color: #adb5bd;
  }
}

.image-upload {
  width: 100%;
  height: 300rpx;
  background: #f8f9fa;
  border: 4rpx dashed #dee2e6;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }

  .preview-image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }

  .upload-placeholder {
    text-align: center;

    .upload-icon {
      font-size: 80rpx;
      display: block;
      margin-bottom: 20rpx;
    }

    .upload-text {
      font-size: 28rpx;
      color: #6c757d;
    }
  }
}

.price-input-container {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 15rpx;
  overflow: hidden;
  transition: all 0.3s ease;

  &:focus-within {
    border-color: #FF6B35;
    background: #fff;
  }

  .price-symbol {
    padding: 0 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #FF6B35;
    background: rgba(255, 107, 53, 0.1);
    height: 80rpx;
    line-height: 80rpx;
  }

  .price-input {
    flex: 1;
    height: 80rpx;
    padding: 0 25rpx;
    font-size: 30rpx;
    border: none;
    background: transparent;
  }
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #FF6B35, #F7931E);
  border: none;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(255, 107, 53, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 5rpx 15rpx rgba(255, 107, 53, 0.4);
  }

  &[disabled] {
    background: #dee2e6;
    color: #6c757d;
    box-shadow: none;
  }

  .btn-text {
    font-size: 32rpx;
    font-weight: 600;
    color: white;
  }
}

.dish-list {
  margin: 40rpx 30rpx 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);

  .list-header {
    padding: 40rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    .list-title {
      font-size: 36rpx;
      font-weight: bold;
      color: white;
    }
  }

  .dish-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #f1f3f4;

    &:last-child {
      border-bottom: none;
    }

    .dish-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 15rpx;
      margin-right: 30rpx;
      flex-shrink: 0;
    }

    .dish-info {
      flex: 1;

      .dish-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 10rpx;
      }

      .dish-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #FF6B35;
      }
    }

    .dish-actions {
      .delete-btn {
        font-size: 40rpx;
        padding: 10rpx;
      }
    }
  }
}
</style>